<template>
  <el-card class="place-title">
    <p class="link-title">时光轴</p>
    <div class="link-line">
      <p class="link-line-border"></p>
    </div>
    <!-- 归档历史 -->
    <div class="timeLine">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in timeLineList"
          :key="index"
          :timestamp="item.createTime"
        >
          <span v-if="index==0">{{ item.lineTitle }}</span>
          <span v-else class="lineTitle">{{ item.lineTitle }}</span>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- pagination -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="10">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      timeLineList:[
        {
          createTime:'',
          lineTitle:'共计10条记录',
          creatorName:'',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
        {
          createTime:'2021-08-23',
          lineTitle:'这是第一个归档',
          creatorName:'123',
        },
      ],
      total:0,
      page:1,
    };
  },
  methods:{
    // 页码 
    handleCurrentChange(page){
      this.page = page;
    },
  },
  created(){
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/scss/dark.scss";
.place-title{
  .link-title{
    font-size: 16px;
    line-height:24px;
    text-align: center;
    font-family:'Chasing-Light',Georgia, Times, 'Times New Roman', serif;
    color:transparent;
    background-clip: text;
    background-image:  linear-gradient(to right, #091c85, #152ae0,#67b1f7,#3502f0,#11076e);
  }
  // 标题线
  .link-line{
    width:50%;
    margin:10px auto;
    .link-line-border{
      height:2px;
      margin:4px 0;
      background-image:  linear-gradient(to right, #091c85, #152ae0,#67b1f7,#3502f0,#11076e);
    }
  }
  // 归档历史
  .timeLine{
    padding:15px 10px;
    .el-timeline{
      margin-left:150px;
    }
    .lineTitle{
      color:#6ca3f0;
      cursor: pointer;
      &:hover{
        color:#317adf;
        text-decoration: underline;
      }
    }
  }
  // pagination
  .pagination{
    text-align: center;
    .el-pagination{
      @include font_color("text-color");
      /deep/ button{
        @include font_color("text-color");
        @include background_color("background_color");
      }
      /deep/ .el-pager{
        li{
          @include font_color("text-color");
          @include background_color("background_color");
        }
      }
    }
  }
}
</style>
